<template>
  <div class="mapDiv">
    <div class="leftDiv">
      <div class="bjimg"></div>
    </div>
    <div class="aslider_s">
      <div class="asliderStyle">
        <div class="centerDiv">
          <ul>
            <li v-for="(item, index) in components" :key="index" @click="selectComponent(item, index)" >
              <div :style="{ 'background-image': item.selected ? 'url(' + selectedImageUrl + ')' : 'url(' + imageUrl + ')' }" :class="{ 'selected': selectedIndex === index }">
                <img :src="getImgSrc(index)" alt="">
                <span>{{ item.name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="allDiv">
      <component :is="currentComponent"  @update-current-component="UpdateCurrentComponent"></component>
    </div>
    <div class="rightDiv">
      <div class="bjimg"></div>
    </div>
    <div class="bottomS">
      <div class="bottomDiv">
        <ul>
          <li class="firstDiv">
            <img src="../../assets/images/yujing.png" alt="">
            <text>预报</text>
          </li>
          <li class="publicDiv">
            <img src="../../assets/images/zhihui.png" alt="">
            <text>智慧预警</text>
          </li>
          <li class="publicDiv">
            <el-icon size="34" color="#0380F3"><Monitor /></el-icon>
            <text>首页</text>
          </li>
          <li class="publicDiv">
            <img src="../../assets/images/moxing.png" alt="">
            <text>模型预演</text>
          </li>
          <li class="lastDiv">
            <img src="../../assets/images/yuan.png" alt="">
            <text>预案调度</text>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>


import mapz from "./mapz.vue";
import luans from "./luans.vue";
import diaodu from "./diaodu.vue";
import yuny from "./yuny.vue";
import shes from "./shes.vue";
import total from "./total.vue";
import set from "./set.vue";
import waterworks from "./waterworks.vue";
import waterku from "./waterku.vue";
import hedao from "./hedao.vue";
import imageUrl from '../../assets/images/ullib.png';
import selectedImageUrl from '../../assets/images/ullil.png';

export default {
  name: "Index",
  components:{
    mapz,luans,diaodu,yuny,shes,total,set,waterworks,waterku,hedao
  },
  data() {
    return {

      selectedIndex:0,
      currentComponent: waterworks, // 初始选中项索引
      imageUrl:imageUrl,
      selectedImageUrl:selectedImageUrl,
      components: [ // 组件选项
        { name: '综合管理', component: 'waterworks', selected: true },
        { name: '数字孪生', component: 'luans', selected: false },
        // { name: '智慧调度', component: 'diaodu', selected: false },
        { name: '智慧运营', component: 'yuny', selected: false },
        { name: '设施管理', component: 'shes', selected: false },
        { name: '统计分析', component: 'total', selected: false },
        { name: '知识管理', component: 'luans', selected: false },
        // { name: '智慧打印', component: 'luans', selected: false },
        // { name: '系统设置', component: 'set', selected: false },
        // 添加其他组件选项
      ],
      imageUrls: [
        '../../assets/images/x1.png',
        '../../assets/images/x2.png',
       '../../assets/images/x3.png',
        '../../assets/images/x4.png',
        '../../assets/images/x5.png',
        '../../assets/images/x6.png',
        '../../assets/images/x6.png'
      ],

    };
  },

  mounted() {
    // 监听子组件传递过来的事件


  },
  methods: {

    UpdateCurrentComponent(data) {
      // 处理从子组件传递过来的名称和 ID
      const entityId = data.id;
      const entityType = data.type;
      if(entityType == '1'){
        this.currentComponent = waterku;
      }else if(entityType == '2'){
        this.currentComponent = hedao;
      }else if(entityType == '3'){
        this.currentComponent = waterworks;
      }

      // 进行进一步的操作，例如显示信息窗口等
    },
    selectComponent(item, index) {

      // 将当前选中的组件设置为选中项
      this.currentComponent = item.component;
      this.selectedIndex = index;
      // 更新选中状态
      this.components.forEach((component, idx) => {
        component.selected = idx === index;
      });
    },
    getImgSrc(index) {
      return this.imageUrls[index];
    },

    switchToImageMap() {
      // this.map.removeLayer(this.tdtVecLayer);
    },
    switchToVectorMap() {
      // this.map.removeLayer(this.tdtImgLayer);
      // this.tdtVecLayer.addTo(this.map);
    }

  }
};
</script>

<style scoped lang="scss">
  .mapDiv{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    .leftDiv{
      z-index: 334;
      position: absolute;
      left: 0;
      width: 2%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .bjimg{
        width: 80%;
        height: 70%;
        background-image: url("../../assets/images/leftimg.png");
        background-size: cover; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
      }

    }
    .rightDiv{
      z-index: 333;
      position: absolute;
      right: 0;
      width: 2%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .bjimg{
        width: 80%;
        height: 70%;
        background-image: url("../../assets/images/right.png");
        background-size: cover; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
      }

    }

    .aslider_s{
      position: absolute;
      z-index: 333;
      width: 17%;
      height: 100%;
      background-color: #001C34;
      top: 7%;
      left: 0%;


      .asliderStyle{
        background-image: url("../../assets/images/leftKuang.png");
        background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
        font-size: 1rem;
        height: 86%;
        display: flex;

        .centerDiv{
          width: 92%;
          height: 100%;
          padding: 0rem 0rem 0rem 5rem;
          overflow: hidden;
          display: flex;
          align-items: center;
          ul {
            list-style-type: none;  /* 设置列表项的符号为无 */
            padding: 0;  /* 去除默认的内边距 */
            height: 80%;
            display: flex;
            flex-direction: column;
            li{
              cursor: pointer;
              flex: 1;
              div{
                width: 18rem;
                height: 2rem;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 1.2rem;
                color: #90B7D3;
                line-height: 33px;
                text-align: left;
                font-style: normal;
                position: relative;
                background-size: cover; /* 背景图片铺满并保持比例不变 */
                background-repeat: no-repeat; /* 不重复平铺 */
                background-position: center; /* 图片居中对齐 */
                margin: 0; /* 去除默认的外边距 */
                padding: 0; /* 去除默认的内边距 */
                img{
                  width: 2rem;
                  position: absolute;
                  top: -0.8rem;
                  left: 1rem;
                }
                span{
                  position: absolute;
                  top: -1rem;
                  left: 4rem;
                }
              }
              .selected {
                color: white;
                font-size: 1.4rem!important;
              }
            }
          }
        }



      }


    }
    .allDiv{

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 111;

    }
    .bottomS{
      position: absolute;
      bottom: 0;
      z-index: 999;
      width: 100%;
      height: 3.5rem;
      opacity: 0.8;
      background-image: url("../../assets/images/bottom1.png");
      background-size: cover; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      margin: 0; /* 去除默认的外边距 */
      padding: 0; /* 去除默认的内边距 */
      display: flex;
      align-items: center;
      justify-content: center;
      .bottomDiv{
        width: 50%;
        height: 100%;
        ul{
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: space-between;

          .firstDiv{
            background-image: url("../../assets/images/leftc.png");
            background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
          }
          .lastDiv{
            background-image: url("../../assets/images/rightc.png");
            background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
          }

           .publicDiv{
              border: 1px solid #1c84c6;
             background-color: #00294a;
           }



          li{
            width: 19%;
            cursor: pointer;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            img{
              width: 2rem;
            }
            text{
              margin-left: 0.5rem;
            }
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;

          }
        }
      }
    }

  }
</style>

